import React from "react";
import {Button, Grid, InputAdornment, InputLabel, makeStyles, Paper, TextField} from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";

import {Toolbar} from "../../../shared/components";
import {ITEM_QUANTITY_TYPE} from "../../../shared/utilities/referenceData.util";

const useStyle = makeStyles(theme => ({
    paper: {padding: theme.spacing(3, 2)},
}));

const AddInventory = ({onClose, onConfirm}) => {
    const classes = useStyle();

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Add Parts Itemt"
                actions={
                    <React.Fragment>
                        <Button color="primary" variant="contained" onClick={onConfirm}>Add</Button>
                        <Button variant="contained" onClick={onClose}>Cancel</Button>
                    </React.Fragment>
                }
            />

            <Grid item xs={12}>
                <Paper elevation={2} className={classes.paper}>
                    <Grid container spacing={3} alignItems={"center"}>
                        <Grid item xs={2}><InputLabel htmlFor="itemNumber">Item Number</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="itemNumber"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="itemName">Item Name</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="itemName"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="quantity">Quantity</InputLabel></Grid>
                        <Grid item xs={2}>
                            <TextField
                                id="quantity"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={2}>
                            <Autocomplete
                                id="itemQuantityType"
                                options={ITEM_QUANTITY_TYPE}
                                defaultValue={ITEM_QUANTITY_TYPE[0]}
                                renderInput={(params) => (
                                    <TextField {...params} variant="outlined"/>
                                )}
                                disableClearable
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="itemCost">Item Cost</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="itemCost"
                                variant="outlined"
                                fullWidth
                                InputProps={{startAdornment: <InputAdornment position="start">$</InputAdornment>}}
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="itemType">Item Type</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="itemType"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="location">Location</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="location"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>

                        <Grid item xs={2}><InputLabel htmlFor="supplier">Supplier</InputLabel></Grid>
                        <Grid item xs={4}>
                            <TextField
                                id="supplier"
                                variant="outlined"
                                fullWidth
                            />
                        </Grid>

                        <Grid item xs={12}><InputLabel htmlFor="desc">Description</InputLabel></Grid>
                        <Grid item xs={12}>
                            <TextField
                                id="desc"
                                variant="outlined"
                                fullWidth
                                multiline rows={4}
                            />
                        </Grid>
                    </Grid>
                </Paper>
            </Grid>
        </Grid>
    );
};

export default AddInventory;
